<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="header">
    <div class="logo">学生选课系统</div>
    <div class="user">
        <i class="fa fa-caret-down point"></i>
        <i class="fa fa-user"></i>
        管理员
        <ul>
            <li><a href="javascript:void (0)">修改密码</a> </li>
            <li><a href="javascript:void (0)">个人信息</a></li>
            <li><a href="javascript:void (0)">退出登录</a></li>
        </ul>
    </div>

</div>
<div class="left">
    <div class="title">
        <i class="fa fa-home">  </i>
        系统功能
    </div>
    <div class="menux">
        <p>
            <i class="fa fa-info-circle"></i>
            功能名称1
            <i class="fa fa-angle-right point"></i>
        </p>
        <ul>
            <li>
                <a href="javascript:void (0);" url="list.html" title="子功能1">
                    <i class="fa fa-caret-right"></i>
                    子功能1
                </a>
            </li>
            <li>
                <a href="javascript:void (0);" url="2.html" title="子功能2">
                    <i class="fa fa-caret-right"></i>
                    子功能2
                </a>
            </li>
            <li>
                <a href="javascript:void (0);" url="3.html" title="子功能3">
                    <i class="fa fa-caret-right"></i>
                    子功能3
                </a>
            </li>
        </ul>
        <p>
            <i class="fa fa-info-circle"></i>
            功能名称2
            <i class="fa fa-angle-right point"></i>
        </p>
        <ul>
            <li>
                <a href="javascript:void (0);" url="list.html" title="子功能1">
                    <i class="fa fa-caret-right"></i>
                    子功能1
                </a>
            </li>
            <li>
                <a href="javascript:void (0);" url="2.html" title="子功能2">
                    <i class="fa fa-caret-right"></i>
                    子功能2
                </a>
            </li>
            <li>
                <a href="javascript:void (0);" url="3.html" title="子功能3">
                    <i class="fa fa-caret-right"></i>
                    子功能3
                </a>
            </li>
        </ul>
        <p>
            <i class="fa fa-info-circle"></i>
            功能名称3
            <i class="fa fa-angle-right point"></i>
        </p>
        <ul>
            <li>
                <a href="javascript:void (0);" url="list.html" title="子功能1">
                    <i class="fa fa-caret-right"></i>
                    子功能1
                </a>
            </li>
            <li>
                <a href="javascript:void (0);" url="2.html" title="子功能2">
                    <i class="fa fa-caret-right"></i>
                    子功能2
                </a>
            </li>
            <li>
                <a href="javascript:void (0);" url="3.html" title="子功能3">
                    <i class="fa fa-caret-right"></i>
                    子功能3
                </a>
            </li>
        </ul>
    </div>
</div>
<div class="main">
    <div class="location">
        <i class="fa fa-home"></i>
        <span class="menu_title">用户管理</span>
    </div>
    <iframe src="list.jsp" width="100%" height="100%" frameborder="0"></iframe>

</div>
</body>

<script src="https://code.jquery.com/jquery-3.6.0.min.js" type="text/javascript"></script>
<script>
    $(function (){
        $('.menux p').click(function (){
            $(this).siblings('ul').slideUp(200);
            $(this).next('ul').slideToggle(200);
        });
        $('.menux ul a').click(function (){
            $('iframe').attr("src",$(this).attr("url"));
            $('.menu_title').html($(this).attr("title"));
        });
    })
</script>
</html>